<template>
  <div class="box-bd">
    <ul class="clearfix">
      <li v-for="(item,index) in arr" :key="index">
        <a href="#">
          <img :src="item.src" alt="" />
          <h4>{{item.title}}</h4>
          <div class="info"><span>高级</span> • <span>{{item.num}}</span>人在学习</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   props : {
      arr : {
         type : Array,
         required : true
      }
   },
};
</script>

<style>
.box-bd ul {
  width: 1225px;
}
.box-bd ul li {
  position: relative;
  top: 0;
  float: left;
  width: 228px;
  height: 270px;
  background-color: #fff;
  margin-right: 15px;
  margin-bottom: 15px;
  transition: all 0.3s;
}
.box-bd ul li a {
  display: block;
}
.box-bd ul li:hover {
  top: -8px;
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
}
.box-bd ul li img {
  width: 100%;
}
.box-bd ul li h4 {
  margin: 20px 20px 20px 25px;
  font-size: 14px;
  color: #050505;
  font-weight: 400;
}
.box-bd .info {
  margin: 0 20px 0 25px;
  font-size: 12px;
  color: #999;
}
.box-bd .info span {
  color: #ff7c2d;
}
</style>